<template>
  <div>
    <div  class="content">
      <!--导航条-->
      <div class="tag">
        <div class="tag_zhong">
          <div @click="style(1)" v-bind:class="style1">
            全部
          </div>
          <div @click="style(2)" v-bind:class="style2">
            单选题
          </div>
          <div @click="style(3)" v-bind:class="style3">
            多选题
          </div>
          <div @click="style(4)" v-bind:class="style4">
            判断题
          </div>
          <div @click="style(5)" v-bind:class="style5">
            填空题
          </div>
        </div>
      </div>
      <!--全部题-->
      <div v-if="show==1" class="answer_three">
        <div class="answer_three_header">
          共 {{total}} 道题 <span>(其中单选题{{radioCont}}道，多选题{{checkCont}}道，判断题{{judgeCont}}道, 填空题{{fillCont}}道)</span>
        </div>

        <!--单选题-->
        <div class="topic_ceshi">
          <div class="answer_three_tips">
            <span class="zi_lan">单选题</span>
          </div>
          <div v-for="(radios, index) in radio" class="tkj">
            <div class="subject">
              {{index+1}}. {{radios.content}}
            </div>
            <ul>
              <li v-for="radioss in radios.option">
                {{radioss}}
              </li>
              <li>
               正确答案：<span style="color: #3B50A1">{{radios.correctAnswer}}</span>          </li>
            </ul>
            <div class="answerAn">
              答案解析：<br/>
              <span>{{radios.answerAnalysis}}</span>
            </div>
          </div>
        </div>
        <!--多选题-->
        <div class="topic_ceshi">
          <div class="answer_three_tips">
            <span class="zi_lan">多选题</span>
          </div>
          <div v-for="(checks, index) in check" class="tkj">
            <div class="subject">
              {{radio.length+(index+1) }}. {{checks.content}}
            </div>
            <ul>
              <li v-for="checkss in checks.option">
                {{checkss}}
              </li>
              <li>
             正确答案：<span style="color: #3B50A1">{{checks.correctAnswer}}</span>          </li>
            </ul>
            <div class="answerAn">
              答案解析：<br/>
              <span>{{checks.answerAnalysis}}</span>
            </div>
          </div>
        </div>
        <!--判断题-->
        <div class="topic_ceshi">
          <div class="answer_three_tips">
            <span class="zi_lan">判断题</span>
          </div>
          <div v-for="(judges, index) in judge" class="tkj">
            <div class="subject">
              {{(check.length+radio.length)+(index+1) }}. {{judges.content}}
            </div>
            <ul>
              <li v-for="judgess in judges.option">
                {{judgess}}
              </li>
              <li>
              正确答案：<span style="color: #3B50A1">{{judges.correctAnswer}}</span>          </li>
            </ul>
            <div class="answerAn">
              答案解析：<br/>
              <span>{{judges.answerAnalysis}}</span>
            </div>
          </div>
        </div>
        <div class="topic_ceshi">
          <div class="answer_three_tips">
            <span class="zi_lan">填空题</span>
          </div>
          <div v-for="(judges, index) in fill" class="tkj">
            <div class="subject">
              {{(check.length+radio.length+judge.length)+(index+1) }}. {{judges.content}}
            </div>
            <ul>
              <li v-for="judgess in judges.option">
                {{judgess}}
              </li>
              <li>
                正确答案：<span style="color: #3B50A1">{{judges.correctAnswer}}</span>          </li>
            </ul>
            <div class="answerAn">
              答案解析：<br/>
              <span>{{judges.answerAnalysis}}</span>
            </div>
          </div>
        </div>
        <div :class="(end)?(more):(endclass)" @click="(end)?getMore():''">{{loadtext}}</div>
      </div>
      <!--单选题-->
      <div v-if="show==2" class="answer_three">
        <div class="answer_three_header">
          共 {{total}} 道题 <span>(其中单选题{{radioCont}}道，多选题{{checkCont}}道，判断题{{judgeCont}}道, 填空题{{fillCont}}道)</span>
        </div>

        <!--单选题-->
        <div class="topic_ceshi">
          <div class="answer_three_tips">
            <span class="zi_lan">单选题</span>
          </div>
          <div v-for="(radios, index) in radio" class="tkj">
            <div class="subject">
              {{index+1}}. {{radios.content}}
            </div>
            <ul>
              <li v-for="radioss in radios.option">
                {{radioss}}
              </li>
              <li>
             正确答案：<span style="color: #3B50A1">{{radios.correctAnswer}}</span>          </li>
            </ul>
            <div class="answerAn">
              答案解析：<br/>
              <span>{{radios.answerAnalysis}}</span>
            </div>
          </div>
        </div>

      </div>
      <!--多选题-->
      <div v-if="show==3" class="answer_three">
         <div class="answer_three_header">
          共 {{total}} 道题 <span>(其中单选题{{radioCont}}道，多选题{{checkCont}}道，判断题{{judgeCont}}道, 填空题{{fillCont}}道)</span>
        </div>
        <!--多选题-->
        <div class="topic_ceshi">
          <div class="answer_three_tips">
            <span class="zi_lan">多选题</span>
          </div>
          <div v-for="(checks, index) in check" class="tkj">
            <div class="subject">
              {{(index+1)}}. {{checks.content}}
            </div>
            <ul>
              <li v-for="checkss in checks.option">
                {{checkss}}
              </li>
              <li>
               正确答案：<span style="color: #3B50A1">{{checks.correctAnswer}}</span>          </li>
            </ul>
            <div class="answerAn">
              答案解析：<br/>
              <span>{{checks.answerAnalysis}}</span>
            </div>
          </div>
        </div>


      </div>
      <!--判断题-->
      <div v-if="show==4" class="answer_three">
        <div class="answer_three_header">
          共 {{total}} 道题 <span>(其中单选题{{radioCont}}道，多选题{{checkCont}}道，判断题{{judgeCont}}道, 填空题{{fillCont}}道)</span>
        </div>

        <!--判断题-->
        <div class="topic_ceshi">
          <div class="answer_three_tips">
            <span class="zi_lan">判断题</span>
          </div>
          <div v-for="(judges, index) in judge" class="tkj">
            <div class="subject">
              {{(index+1) }}. {{judges.content}}
            </div>
            <ul>
              <li v-for="judgess in judges.option">
                {{judgess}}
              </li>
              <li>
              正确答案：<span style="color: #3B50A1">{{judges.correctAnswer}}</span>          </li>
            </ul>
            <div class="answerAn">
              答案解析：<br/>
              <span>{{judges.answerAnalysis}}</span>
            </div>
          </div>
        </div>
      </div>
        <div v-if="show==5" class="answer_three">
          <div class="answer_three_header">
            共 {{total}} 道题 <span>(其中单选题{{radioCont}}道，多选题{{checkCont}}道，判断题{{judgeCont}}道, 填空题{{fillCont}}道)</span>
          </div>

          <!--填空题-->
          <div class="topic_ceshi">
            <div class="answer_three_tips">
              <span class="zi_lan">填空题</span>
            </div>
            <div v-for="(judges, index) in fill" class="tkj">
              <div class="subject">
                {{(index+1) }}. {{judges.content}}
              </div>
              <ul>
                <li v-for="judgess in judges.option">
                  {{judgess}}
                </li>
                <li>
                  正确答案：<span style="color: #3B50A1">{{judges.correctAnswer}}</span>          </li>
              </ul>
              <div class="answerAn">
                答案解析：<br/>
                <span>{{judges.answerAnalysis}}</span>
              </div>
            </div>
          </div>

      </div>

    </div>

  </div>
</template>

<script>
  export default {

    data() {
      return {
        show:1,

        style1:'click',
        style2:'',
        style3:'',
        style4:'',
        style5:'',

        type:4,
        questionsList:[],//题目列表
        pageIndex:1,
        pageSize:20,
        loadtext:'加载更多',

        total:'',//总题数
        radioCont:'',
        checkCont:'',
        judgeCont:'',
        fillCont:'',

        end:true,//停止加载中点击
        more:'more',
        endclass:'endclass',


        radio:[],//单选题
        check:[],//多选题
        judge:[],//判断题
        fill:[],//填空题
      }
    },
    methods: {
      style(e){//调节标题样式
        if(e==1){
          this.show=1;
          this.style1='click';
          this.style2='';
          this.style3='';
          this.style4='';
          this.style5='';
          this.type =4;
          this.pageSize =20;
          this.all()
        }
        if(e==2){
          this.show=2;
          this.style1='';
          this.style2='click';
          this.style3='';
          this.style4='';
          this.style5='';
          this.type =1;
          this.pageSize = this.radioCont;
          this.pageIndex =1;
          if(this.checkCont>1){
            this.all()
          }
        }
        if(e==3){
          this.show=3;
          this.style1='';
          this.style2='';
          this.style3='click';
          this.style4='';
          this.style5='';
          this.type =2;
          this.pageIndex =1;
          this.pageSize = this.checkCont;
          if(this.checkCont>1){
            this.all()
          }
        }
        if(e==4){
          this.show=4;
          this.style1='';
          this.style2='';
          this.style3='';
          this.style4='click';
          this.style5='';
          this.type =3;
          this.pageIndex =1;
          this.pageSize = this.judgeCont;
          if(this.judgeCont>1){
            this.all()
          }
        }
        if(e==5){
          this.show=5;
          this.style1='';
          this.style2='';
          this.style3='';
          this.style4='';
          this.style5='click';
          this.type =5;
          this.pageIndex =1;
          this.pageSize = this.fillCont;
          if(this.fillCont>1){
            this.all()
          }
        }

      },
      del(id,index,type){//删除
        console.log(id);
        console.log(index);
        console.log(type);
        this.$axios({
          url: '/web/subject/wrongQuestion/delete/'+id,
          method: 'DELETE',
          data:{
          },
          headers: {
            'Content-Type': 'application/json;charset=UTF-8'
          },
          transformRequest: [function(data) {  //json
            data = JSON.stringify(data);
            return data
          }],
        }).then((response) => {
          console.log(response.data);
          if(response.data.msg=='success'){
            this.$Message.success('删除成功');
            if(type==1){ //删除单选数组
              this.radio.splice(index,1);
              this.$router.go(0);
            }
            if(type==2){ //删除多选数组
              this.check.splice(index,1);
              this.$router.go(0);
            }
            if(type==3){ //删除判断数组
              this.judge.splice(index,1);
              this.$router.go(0);
            } if(type==5){ //删除填空数组
              this.judge.splice(index,1);
              this.$router.go(0);
            }
          }else {
            this.$Message.success('删除失败');
          }
        }).catch((error) => {
          console.log("调取失败500");
          this.$Message.error('请求删除试题失败！')
          this.spinShow=false;
        });
      },
      getMore(){
        this.pageIndex = this.pageIndex + 1;
        this.all()
      },
      all(){  //渲染题
        var userId =this.$cookies.get('pcexam_id');
        console.log(userId)
        this.$axios({
          url: '/admin/subject/questionBank',
          method: 'POST',
          data:{
            subjectId:this.$route.query.examId,//专题id
            type:this.type,
            pageIndex:this.pageIndex,
            pageSize:this.pageSize,
          },
          headers: {
            'Content-Type': 'application/json;charset=UTF-8'
          },
          transformRequest: [function(data) {  //json
            data = JSON.stringify(data);
            return data
          }],
        }).then((response) => {
          // console.log(response.data);

          if(response.data.code==500){
            this.$Message.error('获取错题失败！');
          }else {
              this.total = response.data.totalQuestionCount;
              this.radioCont = response.data.singleChoiceCount;
              this.checkCont = response.data.multipleChoiceCount;
              this.judgeCont = response.data.judgeCount;
              this.fillCont = response.data.gapFillingCount;


            if(this.pageIndex!=1){
              // console.log('pageIndex'+pageIndex);
              // questionsList = questionsList.concat(response.data.questions)
              if(response.data.questions && response.data.questions.length > 0) {
                this.questionsList = this.questionsList.concat(response.data.questions)
                // console.log(this.questionsList);
              }
            if(response.data.questions<20){ //
              this.end =false;
              this.loadtext ="已全部加载完毕"
            }
            }else{
              this.questionsList = response.data.questions;
            }
            var qList =this.questionsList,
                radioList =[],
                checksList =[],
                judgesList = [],
                fillList =[];

            for(var i=0;i<qList.length;i++){
              // console.log(qList[i].type)
              if(qList[i].type==1){//单选
                var strArr=[];
                
                if(qList[i].optionA){
                    strArr.push("A、"+qList[i].optionA);
                }
                if(qList[i].optionB){
                  strArr.push("B、"+qList[i].optionB)
                }
                if(qList[i].optionC){
                  strArr.push("C、"+qList[i].optionC)
                }
                if(qList[i].optionD){
                  strArr.push("D、"+qList[i].optionD)
                }
                if(qList[i].optionE){
                  strArr.push("E、"+qList[i].optionE)
                }
                // console.log(strArr);
                //  if(qList[i].content!='') {
                    radioList.push({
                      answerAnalysis:qList[i].answerAnalysis,//答案解析
                      content:qList[i].content,//题名
                      correctAnswer: qList[i].answer,//正确答案
                      id:qList[i].id,//题目id
                      option: strArr,//题选项
                      questionType:qList[i].type,//题型
                      userAnswer: qList[i].userAnswer,//用户答案
                    });
                //  }

                
              } else if(qList[i].type==2){//多选
//                var strArr = qList[i].option.split("&&");
                var strArr=[];
                if(qList[i].optionA==''||qList[i].optionA==null){

                }else{strArr.push("A、"+qList[i].optionA)}
                if(qList[i].optionB==''||qList[i].optionB==null){

                }else{strArr.push("B、"+qList[i].optionB)}
                if(qList[i].optionC==''||qList[i].optionC==null){

                }else{strArr.push("C、"+qList[i].optionC)}
                if(qList[i].optionD==''||qList[i].optionD==null){

                }else{strArr.push("D、"+qList[i].optionD)}
                if(qList[i].optionE==''||qList[i].optionE==null){

                }else{strArr.push("E、"+qList[i].optionE)}

                // if(qList[i].content!='') {
                  checksList.push({
                    answerAnalysis:qList[i].answerAnalysis,//答案解析
                    content:qList[i].content,//题名
                    correctAnswer: qList[i].answer,//正确答案
                    id:qList[i].id,//题目id
                    option: strArr,//题选项
                    questionType:qList[i].type,//题型
                    userAnswer: qList[i].userAnswer,//用户答案
                  });
                // }
              }else if(qList[i].type==3){//判断
//                var strArr = qList[i].option.split("&&");
                var strArr=[];
                if(qList[i].optionA==''||qList[i].optionA==null){

                }else{strArr.push("A、"+qList[i].optionA)}
                if(qList[i].optionB==''||qList[i].optionB==null){

                }else{strArr.push("B、"+qList[i].optionB)}
                if(qList[i].optionC==''||qList[i].optionC==null){

                }else{strArr.push("C、"+qList[i].optionC)}
                if(qList[i].optionD==''||qList[i].optionD==null){

                }else{strArr.push("D、"+qList[i].optionD)}
                if(qList[i].optionE==''||qList[i].optionE==null){

                }else{strArr.push("E、"+qList[i].optionE)}

                judgesList.push({
                  answerAnalysis:qList[i].answerAnalysis,//答案解析
                  content:qList[i].content,//题名
                  correctAnswer: qList[i].answer,//正确答案
                  id:qList[i].id,//题目id
                  option: strArr,//题选项
                  questionType:qList[i].type,//题型
                  userAnswer: qList[i].userAnswer,//用户答案
                });
              }else if(qList[i].type==5){//判断
                fillList.push({
                  answerAnalysis:qList[i].answerAnalysis,//答案解析
                  content:qList[i].content,//题名
                  correctAnswer: qList[i].answer,//正确答案
                  id:qList[i].id,//题目id
                  questionType:[i].type,//题型
                });
                console.log(this.fill);
              }
            }
            this.radio = radioList;
            this.check =checksList;
            this.judge = judgesList;
            this.fill = fillList;
//                //空数据的话
//            if(this.radio.length==0&&this.check.length==0&&this.judge.length==0){
//              this.show=0
//            }else{
//              this.show=1
//            }
          }
        }).catch((error) => {
          console.log("调取失败500");
          this.$Message.error('请求试题失败！')
          this.spinShow=false;
        });
      }
    },

    mounted:function() {
      this.all();//获取题目


    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .click{
    background: #3B50A1;
    color: white;
  }
  ul li{
    list-style: none;
    line-height:40px;
    cursor: pointer;
    font-size: 16px;
  }
  .content{
    /*padding-top: 100px;*/
  }
  .tag{
    z-index: 1;
    margin-top: 20px;
    width: 100%;
    height:60px;
    background:rgba(255,255,255,1);
    box-shadow:0px 0px 11px 0px rgba(4,0,0,0.1);
  }
  .tag_zhong{
    width: 1079px;
    margin: auto;
  }
  .tag_zhong div{
    width:120px;
    height: 100%;
    line-height: 60px;
    text-align: center;
    cursor: pointer;
    display: inline-block;
    font-size: 18px;
  }

  .answer_three{
    width: 1079px;
    margin: auto;
    background:rgba(255,255,255,1);
    box-shadow:0px 0px 11px 0px rgba(4,0,0,0.1);
    border-radius:1px;
    padding: 18px;
    margin-top: 26px;
  }
  .answer_three_header{
    width: 100%;
    height: 70px;
    border-bottom: 1px solid #BDBDBD;
    position: relative;
    font-size:18px;
    line-height: 70px;
    color:rgba(51,51,51,1);
  }
  .answer_three_header span{
    color: #999999;
  }
  .zi_lan{
    color: #3B50A1;
    font-size: 18px;
  }
  .answer_three_tips{
    color: #999999;
    margin: 30px 0 35px 0;
  }
  .subject{
    line-height:30px;
    font-size: 16px;
    margin-bottom: 24px;
  }
  .tkj{
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 2px  dashed  #E7E7E7;
    position: relative;
  }
.answerAn{
  font-size: 16px;
}
.more{
  cursor: pointer;
  text-align: center;
}
.more:hover{
  color:#3B50A1
}
.endclass{
  text-align: center;
}
</style>
